<template>
  <baidu-map
      class="bm-view"
      :center="{lng: 116.383141, lat: 39.913607}"
      zoom="12"
      :scroll-wheel-zoom="true">

    <bm-marker
        v-for="(marker,index) of markers"
        :key="index"
        :position="{lng: marker.lng, lat: marker.lat}"
        @click="lookDetail(marker)"
        :icon="{url: 'http://api0.map.bdimg.com/images/marker_red_sprite.png', size: {width: 100, height: 100}}"
        >

     <bm-info-window
          :title="infoWindow.restaurantName"
          :position="{lng: infoWindow.lng, lat: infoWindow.lat}"
          :show="marker.showFlag"
          @close="infoWindowClose(marker)">
       <div style="float: left;margin-top: 20px;">
         <!--美食展示-->
         <el-row>
           <!--左卡片-->
           <el-col>
             <el-card class="left_card_timeline" shadow="never">
               <el-button type="text" @click="goToFoodInformation(marker.id,marker.restaurantName)">
                 <div>
                   <el-image
                       style="width: 220px; height: 220px; margin: -20px;"
                       :src="handlerImg(marker.picture)"
                       fit="fill"></el-image>
                 </div>
               </el-button>
             </el-card>
           </el-col>
         </el-row>

       </div>
     </bm-info-window>
    </bm-marker>


    <!--比例尺控件-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!--缩放控件-->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>

    {{markers.information}}
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

import {getAllRestaurants} from "@/api/restaurant/restaurant";

export default {
  name: "Atlas",

  components:{
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarker,
    BmInfoWindow,
  },

  data(){
    return{
      // 地图标记点
      // markers:[
      //   {
      //     lng: '116.370000',
      //     lat: '39.913607',
      //     showFlag:false,
      //     id:'',//餐厅id
      //     restaurantName:'',//餐厅名称
      //   },
      //
      //   {
      //     lng: '116.383141',
      //     lat: '39.900000',
      //     showFlag:false,
      //     restaurantName:''//餐厅名称,
      //   },
      // ],

      /**
       * 所有餐厅的信息
       */
      markers:[],

      infoWindow:{},

      mapStyle: {
        styleJson: [
          {
            "featureType": "all",
            "elementType": "geometry",
            "stylers": {
              "hue": "#007fff",
              "saturation": 89
            }
          },
          {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
              "color": "#ffffff"
            }
          }
        ]
      }
    }
  },

  mounted() {
    this.getAllRestaurants();
  },

  methods:{
    // 点击点坐标赋值
    lookDetail(marker){
      marker.showFlag = true;
      this.infoWindow = marker;
    },

    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false
    },

    /**
     * 获取所有餐厅的信息：经度、纬度、id、餐厅名称
     */
    getAllRestaurants(){
      getAllRestaurants().then(res=>{
        this.markers=res.markers;
      }).catch(()=>{
        this.$message.error("error");
      })
    },

    /**
     * 跳转至当前餐厅详细界面,并传递当前餐厅的餐厅id
     */
    goToFoodInformation(id,userName){
      this.$router.push({
        name:"restaurantInformation",
        params:{id:id,restaurantName:userName}
      });
    },

    /**
     * 好评率
     */
    goodCommentRate(marker) {
      return Math.floor((marker.goodComment / marker.peopleBuy) * 10000) / 100;
    },


    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },

  }
}
</script>

<style scoped>
.bm-view{
  width: 100%;
  height: 87vh;
}
</style>
